<template>
  <div class="comprehensive-archives-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="container">
        <div class="search-input">
          <el-input placeholder="请输入文件进行搜索" v-model="searchValue">
          </el-input>
        </div>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          ref="tree"
          :current-node-key="currentKey"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </div>
      <div class="file-container">
        <div class="btns">
          <div v-if="currentKey" class="btns-item">
            <el-button
              v-if="hasTabDownload"
              type="primary"
              size="small"
              @click="handleUpload"
              >下 载</el-button
            >
            <el-button
              v-if="hasCancelBtn"
              type="primary"
              size="small"
              @click="handleClose"
              >关 闭</el-button
            >
          </div>
          <div v-else class="btns-item">
            <el-button
              v-if="hasTabExport"
              type="primary"
              size="small"
              @click="handleUpload"
              >导 出</el-button
            >
            <!--            <el-button type="primary" size="small" @click="handleDownload">上 传</el-button>-->
          </div>
        </div>
        <div class="file-content">
          <div class="file-pdf"></div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Breadcrumb from "@/components/public/Breadcrumb";

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: "综合管理"
        },
        {
          name: "文件档案库"
        }
      ],
      searchValue: "",
      currentKey: "",
      defaultProps: {
        children: "children",
        label: "label"
      },
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ]
    };
  },
  watch: {
    searchValue(val) {
      this.$refs.tree.filter(val);
    }
  },
  components: {
    Breadcrumb
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /**
     * 选中当前文件
     * @param data {Object} 当前节点数据
     * @param node 节点
     */
    handleNodeClick(data, node) {
      const { id } = data;
      this.currentKey = id;
    },
    // 上传
    handleDownload() {
      this.visible = true;
    },
    // 下载
    handleUpload() {
      console.log("upload");
    },
    // 关闭预览
    handleClose() {
      this.currentKey = "";
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/styles/main";

.comprehensive-archives-page {
  > main {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    background-color: $baseBg;
    padding: 20px;
    .container {
      width: 400px;
      height: 100%;
      overflow: auto;
      background: $mainBg;
      padding: 30px;
      border-radius: 10px;
      margin-right: 20px;
      .search-input {
        width: 100%;
        height: 50px;
        margin-bottom: 20px;
      }
      .filter-tree {
        height: calc(100% - 80px);
        background: transparent;
        color: $mainColor;
        overflow: auto;
        /deep/ .el-tree-node {
          padding: 2px 0;
          &:focus > .el-tree-node__content {
            background: $baseBg;
            color: #fff;
          }
          .el-tree-node__content {
            &:hover {
              background: $baseBg;
              color: #fff;
            }
            &:focus {
              background: $baseBg;
              color: #fff;
              outline: $mainBorder;
            }
          }
        }
      }
    }
    .file-container {
      flex: 1;
      height: 100%;
      .btns {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
        margin-bottom: 10px;
      }
      .file-content {
        width: 100%;
        height: calc(100% - 50px);
        overflow: auto;
        .file-pdf {
          width: 800px;
          height: 100%;
          margin: 0 auto;
          background: #f5f5f5;
        }
      }
    }
  }
}
</style>
